var element = document.createElement('div');
element.setAttribute("id", "divLegend");

var btnLeg = document.createElement("button");
btnLeg.textContent = "图例";
btnLeg.setAttribute("id", "btnLegend");

var LegContainer = document.createElement('div');
LegContainer.setAttribute("id", "divLegContainer");

element.appendChild(btnLeg);
element.appendChild(LegContainer);

var divmap = document.getElementById("map");

divmap.appendChild( element)




//为图例列表动态添加图例
function addlegend(src,name,renderfield) {
    var divicon = document.createElement('div');
    divicon.className = 'legendicon';
    divicon.setAttribute("id", name);
    //图例图片,如果图例为非图片，则只加文字
    if(src !="")
    {
        var imgpic = document.createElement('img');
        imgpic.src=src;
        divicon.appendChild(imgpic);
    }
    //图例文字
    var m_span = document.createElement('span');
    m_span.innerHTML = name;
    divicon.appendChild(m_span);
    divicon.onclick=function(e)
    {
/*----------------------------------------前台查询刷新---------------------------------------*/
        //初始化完成后，拷贝所有feature
        if(_FeaturesLegend.length==0)
        {
            var m_features=_LayerLegend.getSource().getFeatures();
            for (var k = 0; k < m_features.length; k++) {
                _FeaturesLegend.push(m_features[k].clone());
                /*_FeaturesLegend.push(m_features[k]);*/
            }
        }

        //_LayerLegend.getSource().clear();
        var curbtn=this;
        if(_LayerLegend !=null && _VisibleLayerEle.length !=0)
        {
            //如果有分类渲染，则清空图层
            var _features=_LayerLegend.getSource().getFeatures();
            for (var k = 0; k < _features.length; k++) {
                _LayerLegend.getSource().removeFeature(_features[k]);
            }

            //记录图层是否可见
            for (var i = 0; i < _VisibleLayerEle.length; i++) {
                if(_VisibleLayerEle[i].name==curbtn.id)
                {
                    if(_VisibleLayerEle[i].visible==1)
                    {
                        _VisibleLayerEle[i].visible=0;
                    }
                    else
                    {
                        _VisibleLayerEle[i].visible=1;
                    }
                }
            }

            //添加可见feature
            for (var i = 0; i < _VisibleLayerEle.length; i++) {

                if(_VisibleLayerEle[i].visible==1)
                {
                    for (var j = 0; j < _FeaturesLegend.length; j++) {

                        if(_FeaturesLegend[j].get(renderfield)==_VisibleLayerEle[i].name)
                        {
                            /*_FeaturesLegend[j].setStyle(null);*/
                            _LayerLegend.getSource().addFeature(_FeaturesLegend[j]);
                        }
                    }
                }
            }

        }


/*----------------------------------------后台查询刷新---------------------------------------*/
       /* var curbtn=this;
        if(_LayerLegend !=null && _VisibleLayerEle.length !=0)
       {
          var _layerurl=_UrlLegend + "&whereclause=";
           for (var i = 0; i < _VisibleLayerEle.length; i++) {
               if(_VisibleLayerEle[i].name==curbtn.id)
               {
                   if(_VisibleLayerEle[i].visible==1)
                   {
                       _VisibleLayerEle[i].visible=0;
                   }
                   else
                   {

                       _VisibleLayerEle[i].visible=1;
                   }

               }

               if(_VisibleLayerEle[i].visible==1)
               {
                   _layerurl=_layerurl + renderfield + "='" + _VisibleLayerEle[i].name + "' or ";
               }

           }

           if(_layerurl.substr(_layerurl.length-4,4)==" or ")
           {
               _layerurl=_layerurl.substr(0,_layerurl.length-4)
           }
           else
           {
               _layerurl=_layerurl + renderfield + "=''";
           }

           _LayerLegend.setSource( new ol.source.Vector({
               url:_layerurl,
               format: new ol.format.GeoJSON()
           }));


       }*/
    }
    LegContainer.appendChild(divicon);
}

//生成图例列表
function generateLegend(styleName) {
    LegContainer.innerHTML = "";//清空图例div

    if(styleName=="") return;

    var isStyleChanged=false;
    var _ConfigStyle = getStylebyZoom(map.getView().getZoom(),styleName);
    if(_ConfigStyleLegend !=_ConfigStyle)
    {
        isStyleChanged=true;
        _VisibleLayerEle.splice(0,_VisibleLayerEle.length);//清空图层可视列表
        _ConfigStyleLegend=_ConfigStyle;
    }

    //初始化所有要素
    if(_FeaturesLegend.length !=0 && isStyleChanged)
    {

        var _features=_LayerLegend.getSource().getFeatures();
        for (var k = 0; k < _features.length; k++) {
            _LayerLegend.getSource().removeFeature(_features[k]);
        }
        for (var j = 0; j < _FeaturesLegend.length; j++) {
            _LayerLegend.getSource().addFeature(_FeaturesLegend[j]);
        }
    }



    if(_ConfigStyle.renderfield=="")
    {
        var _style0 = _ConfigStyle.style;
        var _src0="";
        try {
            _src0=_style0.getImage().getSrc();
        } catch (e) {

        }
        addlegend(_src0,styleName,_ConfigStyle.renderfield);

    }
    else
    {
        for ( var key in _ConfigStyle.style) {
            var _name = key;
            if(isStyleChanged)
            {
                _VisibleLayerEle.push({name:_name,visible:1});
            }
            var _style = _ConfigStyle.style[key];
            var _src="";
            try {
                _src=_style.getImage().getSrc();
            } catch (e) {

            }
            addlegend(_src,_name,_ConfigStyle.renderfield);
        }
    }



}



var _zoomLegend = 0; //当前地图级别
var _StyleLegend = ""; //当前图例名称
var _LayerLegend;  //当前渲染图层
var _UrlLegend;  //当前图层数据源原始地址
var _VisibleLayerEle=[];  //当前所有分类字段
var _FeaturesLegend=[];  //当前所有要素
var _ConfigStyleLegend; //当前样式

//注册监听事件
map.on('moveend', onLevelChange);

function onLevelChange(evt) {
    if (_zoomLegend != map.getView().getZoom()) {
        _zoomLegend = map.getView().getZoom();

        generateLegend(_StyleLegend);
    }
}


var Legend = function () {
    this.InitLegend = function (layer,styleName) {

        //给图例赋值样式名称
        _StyleLegend=styleName;
        _LayerLegend=layer;
        _UrlLegend=layer.getSource().getUrl();

        document.getElementById("divLegend").style.display="inline";
    };


    this.RemoveLegend = function () {
        _StyleLegend="";
        document.getElementById("divLegend").style.display="none";
    };


}


$(document).ready(function(){
    $("#btnLegend").click(function(){

        $("#divLegContainer").fadeToggle("slow");

    });



});

